<template>
  <div>
    <nly-breadcrumb>
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-home-fill"
        to="/"
        text="首页"
      />
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-outlet"
        to="/shop1/goods"
        active
        text="商品管理"
      />
    </nly-breadcrumb>
    <!-- Main content -->
    <div class="content" style="padding-left: 10px">
      <row>

        <i-col :md="4" :sm="12">
          <i-button
              type="primary"
              style="margin-left: 16px; margin-top: auto"
              @click="create"
              icon="md-add"
          >添加商品</i-button
          >
        </i-col>

        <i-col :md="6" :sm="12">
          <Input
            v-model="searchText"
            search
            placeholder="请输入商品名称搜索"
            enter-button="搜索"
            @on-search="search(searchText)"
          />
          
        </i-col>
        
        <i-col :md="8" :sm="12">
          <Select
           v-model="data.type_name"
            @on-change="change_type"
            style="width: 200px;margin-left: 16px;"
            placeholder="请选择商品分类"
          >
            <Option
              v-for="(item, index) in count_scale"
              :value="item.type"
              :key="index"
              >{{ item.type }}</Option
            >
          </Select>
           <i-button
            style="margin-left: 16px;"
            @click="resut"
            >重置</i-button
          >
        </i-col>
      </row>
      <br />
      <Table
        border
        size="small"
        :columns="tableheader"
        :data="goodslist"
        @on-selection-change="enterall"
      >
        <template slot-scope="{ row }" slot="img">
          <img
            v-if="arrSplit(row.img)"
            :src="arrSplit(row.img)"
            width="60"
            height="60"
            style="padding: 3px"
            class="image"
          />
        </template>
        <template slot-scope="{ row }" slot="go_istype">{{
          row.go_istype == 0 ? "否" : row.go_istype == 1 ? "是" : "未知"
        }}</template>
        <template slot-scope="{ row }" slot="switch1">
          <i-switch
            v-model="row.hide"
            size="large"
            :true-value="1"
            :false-value="0"
            @on-change="change_upyc(row.id, row.hide)"
          >
            <span slot="open">隐藏</span>
            <span slot="close">不</span>
          </i-switch>
        </template>
        <template slot-scope="{ row }" slot="switch">
          <i-switch
            v-model="row.state"
            size="large"
            :true-value="1"
            :false-value="0"
            @on-change="change_upNew(row.id, row.state)"
          >
            <span slot="open">上架</span>
            <span slot="close">下架</span>
          </i-switch>
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button
            type="primary"
            size="small"
            @click="changegoods(row)"
            icon="ios-brush"
            >修改</Button
          >
          <Button
            style="margin-left: 16px"
            type="error"
            size="small"
            @click="remove(row.id)"
            icon="md-close"
            >删除</Button
          >
        </template>
      </Table>
    </div>
    <div class="Page">
      <Page
        :total="total"
        show-elevator
        show-total
        :page-size="data.pageSize"
        :current="data.page"
        @on-change="get_page"
      />
    </div>
  </div>
</template>

<script>
import apis from "@/api/shop1";
export default {
  components: {},
  data() {
    return {
      goodType: [], 
      go_home_page: [],
      searchText: "",
      update: false,
      total: 0, 
      modalText: false,
      modal2: false,
      loading: false,
      data: {
        page: 1,
        pageSize: 10,
        name: "",
        type_name:''
      },
      dataText: {
        img: "",
        name: "",
        inventory: "",
        sort: "",
        price: "",
        id: "",
        go_introduce: "",
      },
      tableheader: [
        {
          title: "ID",
          key: "id",
          width: 90,
          align: "center",
        },
        {
          title: "商品名称",
          key: "name",
          align: "center",
          tooltip: true,
        },
        {
          title: "图片",
          slot: "img",
          width: 230,
          align: "center",
        },
        {
          title: "金额",
          key: "price",
          align: "center",
        },
        {
          title: "数量",
          key: "inventory",
          align: "center",
        },
        {
          title: "预售时间",
          key: "sellTime",
          align: "center",
        },
        {
          title: "排序值",
          key: "sort",
          align: "center",
        },
        {
          title: "隐藏款开关",
          slot: "switch1",
          width: 170,
          fixed: "right",
          align: "center",
        },

        {
          title: "上下架",
          slot: "switch",
          width: 120,
          fixed: "right",
          align: "center",
        },
        {
          title: "操作",
          slot: "action",
          width: 200,
          fixed: "right",
          align: "center",
        },
      ],
      goodslist: [],
      enteralldata: [],
      count_scale: [],
    };
  },
  created() {
    this.getGoods();
    this.lookrecord()
  },
  methods: {
    resut(){
      this.data.name='',
      this.data.type_name = '',
      this.data.page =1,
      this.getGoods()
    },
    change_type(val) {
      console.log(val);
      this.data.type_name = "";
      this.data.type_name = val;
      this.getGoods();
    },
    lookrecord() {
      var _this = this;
      apis
        .gettypelist({
          page: 1,
          pageSize: 100000,
        })
        .then((response) => {
          console.log(response);
          if (response.data.code == 0) {
            _this.count_scale = response.data.data.list;
            this.loading = false;
          } else {
            this.$Message.error("请求失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
          this.$Message.error("请求失败!");
        });
    },
    arrSplit(str) {
      if ((str || "").split(",")[0]) {
        return str.split(",")[0];
      } else {
        return "";
      }
    },
   
      change_upyc(id, val) {
      let data = {
        id: id,
        hide: val,
      };
      apis
        .change_upyc(data)
        .then((response) => {
          if (response.data.code == 0) {
            this.$Message.success("修改成功");
              this.getGoods();
          } else {
            this.$Message.error("修改失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$Message.error("修改失败!");
        });
    },
    change_upNew(id, val) {
      let data = {
        id: id,
        state: val,
      };
      apis
        .upgoods(data)
        .then((response) => {
          if (response.data.code == 0) {
            this.$Message.success("修改成功");
              this.getGoods();
          } else {
            this.$Message.error("修改失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$Message.error("修改失败!");
        });
    },
    deleteimg(index) {
      this.go_home_page.splice(index, 1);
    },
    confirm_images(val) {
      this.go_home_page.push(...val);
    },
    getGoods() {
      apis.getGoods(this.data).then((response) => {
        if (response.data.code == 0) {
          this.goodslist = response.data.data.list;
          this.go_home_page = (this.goodslist.img || "").split(",");
          
          this.total = response.data.data.total;
        } else {
          this.$Message.error("请求失败!");
        }
      });
    },
    get_page(page) {
      this.data.page = page;
      this.getGoods();
    },
    search(val) {
      this.data.page = 1;
      let data = this.data;
      data.name = val;
      this.getGoods();
    },
    create() {
      this.$router.push("/shop/create_course");
    },
    changegoods(e) {
      this.$router.push({
        path: "/shop/create_course",
        query: {
          id: e.id,
        },
      });
    },

    enterall(e) {
      this.enteralldata = e;
    },
    save() {
      this.loading = true;
      console.log(this.go_home_page);
      this.dataText.img = (this.go_home_page || "").join(",");
      if (this.update) {
        apis
          .updateGoods(this.dataText)
          .then((response) => {
            this.loading = false;
            if (response.data.code == 0) {
              this.$Message.success("修改成功！");
              this.modal2 = false;
              this.getGoods();
            } else {
              this.$Message.error("修改失败");
            }
          })
          .catch((error) => {
            this.loading = false;
            console.log(error);
            this.$Message.error("修改失败!");
          });
      } else {
        console.log(this.data);
        apis
          .addGoods(this.dataText)
          .then((response) => {
            this.loading = false;
            if (response.data.code == 0) {
              this.$Message.success("添加成功！");
              this.modal2 = false;
              this.getGoods();
            } else {
              this.$Message.error("添加失败");
            }
          })
          .catch((error) => {
            this.loading = false;
            console.log(error);
            this.$Message.error("添加失败!");
          });
      }
    },
    remove(id) {
     
      this.$Modal.confirm({
        title: "删除确认",
        content: `确定删除商品？删除后无法恢复`,
        onOk: () => {
          apis
            .deleteGoods({ id: id })
            .then((response) => {
              if (response.data.code == 0) {
                this.getGoods();
                this.$Message.success("删除成功");
              } else {
                this.$Message.error("删除失败");
              }
            })
            .catch((error) => {
              console.log(error);
              this.$Message.error("删除失败!");
            });
        },
        onCancel: () => {},
      });
    },
  },
};
</script>

<style scoped>
.ivu-modal {
  width: 50% !important;
}
.ivu-btn {
  margin-bottom: 0px;
}
.Page {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}
.image {
  max-width: 400px;
  max-height: 200px;
  margin: 10px;
}
.formItemImage {
  display: flex;
  justify-items: left;
  align-items: center;
  flex-wrap: wrap;
}
.formItemImage .ivu-col {
  margin-bottom: 16px;
}
.formItemImage img {
  height: 100%;
}
.button_large {
  padding: 0px 20px;
}
.ivu-input-number {
  width: 100% !important;
}
</style>